<template>
  <div
    class="data-statistical-container animate__faster animate__animated animate__fadeIn"
    v-loading="loading"
  >
    <!-- 标号统计 -->
    <div class="card-view-container chart-warp">
      <div class="chart-header">
        {{ chartHeader ? chartHeader.split("@$@")[0] : "未知" }}
        <span>{{ chartHeader ? chartHeader.split("@$@")[1] : "" }}</span>
      </div>
      <div class="date-time">{{ chartDataTime }}</div>
      <div class="chart-body">
        <ChartView :options="hbtjOpt"></ChartView>
      </div>
    </div>
    <div class="rate-card-wrap">
      <a-row :gutter="[12, 12]">
        <a-col :xl="12" :lg="24" :md="24" :xs="24" :sm="24">
          <div class="card-view-wrap chart-warp-product">
            <div class="card-view-container chart-warp">
              <div class="chart-header">
                {{ clText ? clText.split("@$@")[0] : "未知" }}
                <span>{{ clText ? clText.split("@$@")[1] : "" }}</span>
              </div>
              <div class="chart-body" ref="bhcl-chart"></div>
            </div>
          </div>
        </a-col>
        <a-col :xl="12" :lg="24" :md="24" :xs="24" :sm="24">
          <div class="card-view-wrap">
            <div class="card-view-container chart-warp">
              <div class="chart-header">
                {{ ccText ? ccText.split("@$@")[0] : "未知" }}
                <span>{{ ccText ? ccText.split("@$@")[1] : "" }}</span>
              </div>
              <div class="chart-body" ref="bhcc-chart"></div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<script>
import ChartView from "@/components/ChartView";
import { deepMerge } from "@/utils";
import charMixins from "@/mixins/echarts";
import themeColors from "@/theme/compileFiles/cssVaribles.less";
import { capacityStatisticsStrengthGradeChart } from "@/api/wisdom-beam/productionManage-app";
export default {
  components: {
    ChartView,
  },
  mixins: [charMixins],
  data() {
    return {
      hbtjOpt: {}, //标号统计
      chartsData: {},
      chartDataTime: "",
      chartHeader: "",
      clText: "",
      ccText: "",
      loading: false,
      color: [
        themeColors["--echart-blue"],
        themeColors["--echart-yellow"],
        themeColors["--echart-green"],
        themeColors["--echart-light-blue"],
        themeColors["--echart-pale-red"],
        themeColors["--echart-purple"],
        themeColors["--echart-pink"],
        themeColors["--echart-orange"],
      ],
      sjylDataArr: [],
      empty: false,
    };
  },
  mounted() {},
  methods: {
    //查询标号统计图表数据
    getChartData() {
      let {
        conditionsData: { block, engineerName, mixin, placePart, strength },
        defaultTime,
      } = this.$parent.$data;
      capacityStatisticsStrengthGradeChart({
        secCode: block,
        equCode: mixin,
        startTime: defaultTime[0],
        endTime: defaultTime[1],
        projectName: engineerName,
        placePart,
        strengthGrade: strength,
      })
        .then((res) => {
          let { data } = res;
          let result = data.result || {};
          this.chartDataTime = result.subtext || "";
          this.chartHeader = result.text || "";
          this.clText = result.clText || "";
          this.ccText = result.ccText || "";
          let y = result.y ? result.y : [];
          let y1 = result.y1 ? result.y1 : [];
          let y2 = result.y2 ? result.y2 : [];
          this.hbtjOpt = {
            color: [
              themeColors["--echart-green"],
              themeColors["--echart-blue"],
              themeColors["--echart-pale-red"],
            ],
            legend: {
              icon: "",
              data: result.legend,
            },
            grid: {
              top: "100px",
              left: "50px",
            },
            xAxis: {
              data: result.x,
            },
            yAxis: [
              {
                type: "value",
                position: "left",
                min: 0,
              },
              {
                name: "预警率",
                type: "value",
                position: "right",
                max: 100,
                min: 0,
                axisLabel: {
                  formatter: "{value} %",
                },
              },
            ],
            series: [
              {
                name: "生产量",
                type: "bar",
                barMaxWidth: 40,
                data: y,
              },
              {
                name: "车数",
                type: "line",
                data: y1,
              },
              {
                name: "预警率",
                type: "line",
                yAxisIndex: 1,
                data: y2,
              },
            ],
          };

          let bhclData = [],
            bhccData = [];
          result.x.forEach((item, index) => {
            y.forEach((ite, ind) => {
              let obj = {};
              if (index == ind) {
                obj.value = ite;
                obj.name = item;
                bhclData.push(obj);
              }
            });
            y1.forEach((ite, ind) => {
              let obj = {};
              if (index == ind) {
                obj.value = ite;
                obj.name = item;
                bhccData.push(obj);
              }
            });
          });

          let bhclOpt = {
            color: [
              themeColors["--echart-pale-red"],
              themeColors["--echart-yellow"],
              themeColors["--echart-orange"],
              themeColors["--echart-light-blue"],
            ],
            series: [
              {
                type: "pie",
                radius: ["40%", "55%"],
                data: bhclData,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter: "{b} {c|{c}m³}\n {per|{d}%}",
                      rich: {
                        c: {
                          fontWeight: "bold",
                        },
                        per: {
                          fontWeight: "bold",
                        },
                      },
                    },
                  },
                },
              },
            ],
          };
          this.initPieChar("bhcl-chart", bhclOpt);
          let bhccOpt = {
            color: [
              themeColors["--echart-purple"],
              themeColors["--echart-yellow"],
              themeColors["--echart-pale-red"],
              themeColors["--echart-light-blue"],
            ],
            series: [
              {
                type: "pie",
                radius: ["40%", "55%"],
                data: bhccData,
                itemStyle: {
                  normal: {
                    label: {
                      show: true,
                      formatter: "{b} {c|{c}车}\n {per|{d}%}",
                      rich: {
                        c: {
                          fontWeight: "bold",
                        },
                      },
                    },
                    labelLine: { show: true },
                  },
                },
              },
            ],
          };
          this.initPieChar("bhcc-chart", bhccOpt);
        })
        .catch((_) => {});
    },

    initPieChar(refs, opt = {}) {
      let chart_dom = this.$refs[refs];
      let chartInstance = this.$echarts.init(chart_dom);
      let baseOptions = {
        tooltip: {
          trigger: "item",
        },
        grid: {
          top: "100px",
          left: "50px",
        },
      };
      chartInstance.setOption(deepMerge(baseOptions, opt));
      //开启响应式
      window.addEventListener("resize", () => {
        chartInstance.resize();
      });
    },
  },
};
</script>

<style lang="less" scoped>
.data-statistical-container {
  width: 100%;
  height: 100%;
  padding-right: 10px;
  .custom-scrollbar();
  .card-view-container {
    width: 100%;
    &:last-child {
      margin: 0;
    }
    &.chart-warp {
      height: 380px;
      position: relative;
    }
    .chart-header {
      font-size: 16px;
      height: 18px;
      padding-left: 10px;
      color: #525a5d;
      display: flex;
      align-items: center;
      > span {
        font-size: 14px;
        color: #999;
        margin-left: 10px;
      }
    }
    .date-time {
      font-size: 14px;
      color: #999;
      padding-top: 30px;
      padding-left: 12px;
    }
    .chart-body {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
    }
  }
}
</style>
